<template>
	<view :data-theme="theme">
		<view class='payment-status'>
			<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
			<view class='iconfont icons icon-duihao2 bg_color'
				v-if="order_pay_info.paid || order_pay_info.payType == 'offline'"></view>
			<view class='iconfont icons icon-iconfontguanbi' v-else></view>
			<!-- 失败时：订单支付失败 -->
			<view class='status' v-if="order_pay_info.payType != 'offline'">{{order_pay_info.paid ? '订单支付成功':'订单支付失败'}}
			</view>
			<view class='status' v-else>订单创建成功</view>
			<view class='wrapper'>
				<view class='item acea-row row-between-wrapper'>
					<view>订单编号</view>
					<view class='itemCom'>{{order_pay_info.orderId}}</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>下单时间</view>
					<view class='itemCom'>{{order_pay_info.createTime?order_pay_info.createTime:'-'}}</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>支付方式</view>
					<view class='itemCom' v-if="order_pay_info.payType=='weixin'">微信支付</view>
					<view class='itemCom' v-else-if="order_pay_info.payType=='alipay'">支付宝支付</view>
				</view>
				<view class='item acea-row row-between-wrapper'>
					<view>支付金额</view>
					<view class='itemCom'>{{order_pay_info.payPrice}}</view>
				</view>
			</view>
			<!-- 			<button v-if="buyType == '会员'" @click="goIndex" class='returnBnt cart-color' formType="submit"
				hover-class='none'>返回</button> -->
			<delayPop :userId="userId" :token="token" ref="vipPop"></delayPop>
		</view>

	</view>
</template>

<script>
	import {
		getVipBuySuccessPopup
	} from '@/api/home.js';
	import {
		getOrderDetail,
		wechatQueryPayResult
	} from '@/api/order.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";

	import delayPop from './components/delayPop.vue';
	let app = getApp();
	export default {
		components: {
			delayPop
		},
		data() {
			return {
				orderId: '',
				order_pay_info: {
					paid: true,
					_status: {}
				},
				status: 0,
				msg: '',
				theme: app.globalData.theme,
				buyType: '',
				userId: '',
				token: '',
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getOrderPayInfo();
					}
				},
				deep: true
			}
		},
		onLoad: function(options) {
			if (!options.order_id) return this.$util.Tips({
				title: '缺少参数无法查看订单支付状态'
			}, {
				tab: 3,
				url: 1
			});
			let that = this;

			that.orderId = options.order_id;
			that.userId = options.userId;
			that.token = options.token;
			that.buyType = options.buyType;
			console.log('========  ' + that.orderId)

			//that.addVipBuySuccessPopup();


			// uni.getStorage({
			// 	key: 'orderNo',
			// 	success: function(res) {
			// 		that.orderId = res.data;
			// 	}
			// });

			this.status = options.status || 0;
			this.msg = options.msg || '';
			if (this.isLogin) {
				this.getOrderPayInfo();
			} else {
				toLogin();
			}
		},
		methods: {
			wechatQueryPay() {
				let that = this;
				wechatQueryPayResult(this.orderId).then(res => {
					this.order_pay_info.paid = true;
					uni.setNavigationBarTitle({
						title: this.order_pay_info.paid ? '支付成功' : '支付失败'
					});
					uni.hideLoading();


					if (this.order_pay_info.paid && that.buyType == 'member') { //支付成功 并且 是购买会员 走弹窗接口 
						that.addVipBuySuccessPopup();
					}


				}).catch(err => {
					this.order_pay_info.paid = false;
					uni.hideLoading();
					// return this.$util.Tips({
					// 	title: err
					// });
				})
			},
			addVipBuySuccessPopup() {
				let that = this;
				let params = {};
				params.token = that.token;
				params.userId = that.userId;
				getVipBuySuccessPopup(params).then(res => {
					console.log('!@#=== ' + JSON.stringify(res))
					if (res.code == 0) {
						that.$refs.vipPop.showPop(res.data.pic_url);
					}

				}).catch(err => {

				})
			},
			onLoadFun: function() {
				this.getOrderPayInfo();
			},
			/**
			 * 
			 * 支付完成查询支付状态
			 * 
			 */
			getOrderPayInfo: function() {
				let that = this;
				uni.showLoading({
					title: '正在加载中'
				});
				getOrderDetail(that.orderId).then(res => {
					that.$set(that, 'order_pay_info', res.data);
					that.status = res.data.status; ////////////
					if (res.data.payType === 'weixin' && !that.$wechat.isWeixin() && res.data.paid === false) {
						setTimeout(() => {
							that.wechatQueryPay();
						}, 2000);
					} else {
						uni.setNavigationBarTitle({
							title: res.data.paid ? '支付成功' : '未支付'
						});
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading();
				});
			},
			/**
			 * 去会员页关闭当前所有页面
			 */
			goIndex: function(e) {
				uni.navigateTo({
					url: '/pages/app_member/index'
				});
			},
		}
	}
</script>

<style lang="scss">
	.icon-iconfontguanbi {
		background-color: #999 !important;
		text-shadow: none !important;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.cart_color {
		@include main_color(theme);
		@include coupons_border_color(theme);
	}

	.payment-status {
		background-color: #fff;
		margin: 195rpx 30rpx 0 30rpx;
		border-radius: 10rpx;
		padding: 1rpx 0 28rpx 0;
	}

	.payment-status .icons {
		font-size: 70rpx;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 140rpx;
		text-shadow: 0px 4px 0px rgba(0, 0, 0, .1);
		border: 6rpx solid #f5f5f5;
		margin: -76rpx auto 0 auto;
		background-color: #999;
	}

	.payment-status .iconfont {
		font-size: 70rpx;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 140rpx;
		text-shadow: 0px 4px 0px rgba(0, 0, 0, .1);
		border: 6rpx solid #f5f5f5;
		margin: -76rpx auto 0 auto;
		background-color: #999;
	}

	.payment-status .iconfont.fail {
		text-shadow: 0px 4px 0px #7a7a7a;
	}

	.payment-status .status {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin: 25rpx 0 37rpx 0;
	}

	.payment-status .wrapper {
		border: 1rpx solid #eee;
		margin: 0 30rpx 47rpx 30rpx;
		padding: 35rpx 0;
		border-left: 0;
		border-right: 0;
	}

	.payment-status .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.payment-status .wrapper .item~.item {
		margin-top: 20rpx;
	}

	.payment-status .wrapper .item .itemCom {
		color: #666;
	}

	.payment-status .returnBnt {
		width: 630rpx;
		height: 86rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto 20rpx auto;

	}

	.cart-color {
		@include main_color(theme);
		@include coupons_border_color(theme);
	}
</style>